{% extends "base/base.html" %}

{% block title %}
Images | Breezes - Docker Registry 管理平台
{% endblock %}

{% block container %}
{% set registies = g.registry.list_repository(request.args.get("q", "")).data %}
{% set ActiveRegistry = g.registries.getActive %}
{% if ActiveRegistry %}
<div>
    <p><scan class="glyphicon glyphicon-info-sign"></scan>私有仓地址:&nbsp;<kbd>{{ g.registry.url }}</kbd></p>
    <p><scan class="glyphicon glyphicon-info-sign"></scan>私有仓版本:&nbsp;<kbd>v{{ g.registry.version }}</kbd></p>
    <p><scan class="glyphicon glyphicon-info-sign"></scan>私有仓状态:
    {% if g.registry.isHealth %}
        <b class="text-success">OK</b>
    {% else %}
        <b class="text-danger">Fail</b>
    {% endif %}
    </p>
    <p><scan class="glyphicon glyphicon-info-sign"></scan>当前镜像数量:&nbsp;<span class="badge">{{ registies|length }}</scan></p>
    <div>
        <ol class="breadcrumb">
            <li class="active">Images</li>
            <li>ImageTags</li>
            <li>ImageTagInfo</li>
        </ol>
    </div>
</div>
<div>
    <form class="form-search form-horizontal" action="?q=" method="" id="SearchForm">
        <div class="input-group search-input-group">
            <button type="button" onclick=SearchRepository() class="btn btn-primary"><i class="icon-search"></i></button>
            <input type="text" name="q" placeholder="搜索私有仓镜像" value="{{ request.args.get('q','') }}">
        </div>
    </form>
</div>
{% else %}
    <div class="alert alert-danger" role="alert"><i class="icon-remove-sign"></i> 当前系统无活跃仓库!!!</div>
{% endif %}

{% if g.registry.isHealth and registies %}

<table class="table table-bordered table-hover table-condensed table-responsive">
    <thead>
        <tr class="active">
            <th style="vertical-align: middle; text-align: center;">Image</th>
            <th style="vertical-align: middle; text-align: center;">Description</th>
            <th style="vertical-align: middle; text-align: center;">Operations</th>
        </tr>
    </thead>
    <tbody id="list_repository">
    {% for registry in registies %}
        <tr>
            <td style='vertical-align: middle; text-align: center; width: 60%'>
            {% if registry.name.split('/')|length > 1 %}
            <a href="{{ url_for('ui.registryImageName', namespace=registry.name.split('/')[0], repository_name=registry.name.split('/')[-1]) }}">
            {% else %}
            <a href="{{ url_for('ui.registryImageName', namespace='_', repository_name=registry.name) }}">
            {% endif %}
            {{ "{}/{}".format(g.registry.url.split("://")[-1].strip("/"), registry.name) }}</a>
            </td>
            <td style='vertical-align: middle; text-align: center;'>{{ registry.description }}</td>
            <td style='vertical-align: middle; text-align: center;'>
                <a href="javascript:DeleteRepository('{{ registry.name }}')" title="确认删除镜像: {{ registry.name }}&nbsp;?"><scan class="text-danger glyphicon glyphicon-trash"></scan></a>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
{% endif %}
{% endblock %}

{% block script %}
<script type="text/javascript">
// 更新导航
var NavId=null;
var As=document.getElementById('tab').getElementsByTagName('li');
NavId = As[1];
console.log(NavId);
NavId.className='active';

// 搜索镜像
function SearchRepository() {
    var search = $('#SearchForm').serialize();
    console.log(search);
    if (search) {
        window.location.href="?"+search;
    }
}

// 删除镜像
function DeleteRepository(repository_name) {
layer.confirm("你确定要删除镜像" + repository_name + "?", {
    btn: ['确认删除','我再想想']
}, function(){
    $.ajax({
        url: "{{ url_for('api.registry') }}",
        method: 'DELETE',
        datatype: 'json',
        data: {"ImageName": repository_name},
        success: function(res) {
            console.log(res);
            if (res.success==true) {
                layer.msg("镜像" + repository_name + "删除成功！", {icon: 1});
                window.location.reload();
            } else {
                layer.msg("镜像" + repository_name + "删除失败！"+res.msg, {icon: 2, time: 15*1000});
            }
        },
        error: function(error){
            console.log(error);
        }
    });
});
}
</script>
{% endblock %}
